<template>
  <footer class="footer">
    <div class="container">
      <div class="logo">
        <img v-lazy="logoSrc" alt="logo" />
      </div>
      <div class="icons">
        <t-popup trigger="hover">
          <v-icon name="weixin" class="footer-icon"/>
          <template #content>
            <img v-lazy="gzhImg" class="footer-img"/>
          </template>
        </t-popup>
        <t-popup trigger="hover">
          <v-icon name="douyin1" class="footer-icon"/>
          <template #content>
            <!-- <img v-lazy="gzhImg" class="footer-img"/> -->
          </template>
        </t-popup>
        <t-popup trigger="hover">
          <v-icon name="shipinhao" class="footer-icon"/>
          <template #content>
            <img v-lazy="sphImg" class="footer-img"/>
          </template>
        </t-popup>
        <t-popup trigger="hover">
          <v-icon name="weibo" class="footer-icon"/>
          <template #content>
            <img v-lazy="wbImg" class="footer-img"/>
          </template>
        </t-popup>
        <t-popup trigger="hover">
          <v-icon name="dianbao" class="footer-icon"/>
          <template #content>
            <img v-lazy="dbImg" class="footer-img"/>
          </template>
        </t-popup>
      </div>

      <div class="about">
        <h3>关于</h3>
        <a href="/about">关于我们</a>
        <a href="/about">联系我们</a>
      </div>
      <div class="service">
        <h3>服务</h3>
        <a href="/follow?docs=privacy">隐私协议</a>
        <a href="/follow?docs=user">用户协议</a>
        <a href="/help">帮助中心</a>
      </div>
      <div class="qrcode">
        <div class="qrcode-img">
          <img v-lazy="gzhImg" alt="qrcode" />
          <p>扫码联系客服</p>
        </div>
      </div>
      <div class="beian">
        <p>
          河南流云视易科技有限公司丨<a href="https://beian.miit.gov.cn/" class="beian-link"
            >豫ICP备2022028928号-1</a
          >
        </p>
        <p>
          版权所有 &copy; 2022 <a href="https://pluse.vip/" class="banquan-link">Pluse.Vip</a> Incm.
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { useThemeStore } from '@/store'
const darkLogo = 'https://static.pluse.vip/assets/logo-dark.png'
const lightLogo = 'https://static.pluse.vip/assets/logo.png'
const gzhImg = 'https://static.pluse.vip/assets/gzh.webp'
const sphImg = 'https://static.pluse.vip/assets/sph.webp'
const wbImg = 'https://static.pluse.vip/assets/wb.webp'
const dbImg = 'https://static.pluse.vip/assets/tg.webp'

const themeStore = useThemeStore()

const isDarkMode = computed(() => {
  // 假设你有一个 `themeStore` 状态管理模块，
  // 并且 `mode` 属性表示当前主题模式。
  return themeStore.mode === 'dark'
})

const logoSrc = computed(() => {
  return isDarkMode.value ? darkLogo : lightLogo
})
</script>

<style src="./index.css"></style>
